import { LeftOutline,RightOutline  } from 'antd-mobile-icons'
import { useEffect, useState } from 'react';

export const PopupCom = function (props) {
    console.log("组件接收父组件传递的参数", props);
    let [date,setDate] = useState(null)
    const changeDate = (type)=>{
        return ()=>{
            console.log("切换年份",type);
            if(typeof(props.datas.title)=== 'number'){  
                let count = type === "++" ? ++date : --date
                console.log(count);
                setDate(count)
            }
        }
    }
    useEffect(()=>{
        setDate(props.datas.title)
    },[props.datas])
    return (
        <div>
            <div style={{ height: '30vh' }}>
                <div style={{display:'flex' , margin: '20px'}}>
                    {
                        typeof(props.datas.title)=== 'number'&& <LeftOutline  onClick={changeDate('--')} style={{ flex:'1'}}/>
                    }
                    <div style={{ textAlign: 'center' , flex:'1' }}>{date}</div>
                    {
                        typeof(props.datas.title)=== 'number'&& <RightOutline  onClick={changeDate('++')} style={{ flex:'1'}}/>
                    }
                </div>
                <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                    {props.datas.data.map((it) => {
                        return <div onClick={props.checkMonth(it, props.datas.type,date)} key={it.value} style={{ height: '5vh', width: '20vw', textAlign: 'center', margin: '10px', backgroundColor: '#fff' }}>
                            {it.value}
                        </div>
                    })}
                </div>
            </div>
        </div>
    )
}